<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>sssss</title>
</head>

<body>
<h2>拉入图片</h2>
<hr>
<script>
    var wsUrl="ws://echo.websocket.org/echo";
    var ws=new WebSocket(wsUrl);
    ws.onopen=function(){
        console.log("open");

    }
    ws.onmessage=function(e){
        var blob= e.data;
        console.log("message: "+blob.size+"bytes");
        if(window.webkitURL){
            URL=webkitURL;
        }
        console.log("----------------------------");
        var uri=URL.createObjectURL(blob);
        console.log("ssssssssssssssssssssssssssssssssssss");
        var img=document.createElement("img");
        img.src=uri;
        console.log(uri);
        document.body.appendChild(img);
    }
    document.ondrop=function(e){
        document.body.style.background="#000aaa";
        try{
            e.preventDefault();
            handleFileDrop(e.dataTransfer.files[0]);
            return false;
        }catch (err)
        {
            console.log(err);
        }
    }

        document.ondragover=function(e) {
            e.preventDefault();
            document.body.style.background = "#bfff41";
        }
            document.ondragleave=function(){
                document.body.style.background="#ffffff";
            }
            function handleFileDrop(file){
                var reader=new FileReader();
                reader.readAsArrayBuffer(file);
                reader.onload=function(){
                    console.log("sending: "+file.name);
                    console.log("length: "+file.size);
                    ws.send(reader.result);
                }
            }


</script>
</body>
</html>